<template>
	<div class="search-input" :class="{'is-focused':focused}">
		<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon search" viewBox="0 0 16 17" aria-hidden="true">
			<g fill="none" fill-rule="evenodd">
				<g stroke="#8D9EA7" stroke-width="1.6">
					<path
						d="M8.003 14.403a6.358 6.358 0 0 1-4.525-1.874 6.381 6.381 0 0 1-1.875-4.526 6.358 6.358 0 0 1 1.875-4.525 6.38 6.38 0 0 1 4.525-1.875 6.358 6.358 0 0 1 4.526 1.875 6.38 6.38 0 0 1 1.874 4.525 6.358 6.358 0 0 1-1.874 4.526 6.381 6.381 0 0 1-4.526 1.874h0z"
						fill-rule="nonzero"></path>
					<path stroke-linecap="round" d="M13.4 14.2l1.6 1.6"></path>
				</g>
			</g>
		</svg>
		<label class="input unstyled">
			<input type="text" placeholder="搜索项目" value="" @focus="setFocused" @blur="setBlur">
		</label>
	</div>
</template>

<script>
	export default {
		name: 'SearchInput',
		data() {
			return {
				focused: false
			}
		},
		methods: {
			setFocused() {
				this.focused = true;
			},
			setBlur() {
				this.focused = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-input {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 20px 6px 14px;
		width: 100%;
		height: 36px;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		transition: all 0.2s ease-in 0s;
		box-sizing: border-box;

		.svg-icon {
			width: 12px;
			width: 12px;
		}
	}

	.is-focused {
		background: var(--input-focused);
		border-color: var(--focused-color);
		box-shadow: var(--input-shadow) 0 0 4px 0;
	}

	.unstyled {
		flex: 1;
		height: 100%;

		& input {
			line-height: normal;
			background: none;
			border: 0px;
			outline: 0px;
			font-size: 14px;
			padding-left: 6px;
			color: var(--color);
			width: 100%;
			height: 100%;
		}
	}
</style>
